<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网球 - 我的</title>
    <!-- 引入通用样式 -->
    <style>
        /* 这里可以添加一些自定义样式 */
        .profile-info {
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        /* 更多样式... */
    </style>
</head>
<body>
{% include 'menu.html' %}

    <div class="container">
        <h2>个人中心</h2>

        <!-- 用户登录状态 -->
        <div class="user-login-status">
            <p>欢迎，<strong>用户名</strong>！</p>
            <button onclick="location.href='login.html'">登录</button>
            <button onclick="location.href='logout.html'">退出</button>
        </div>

        <!-- 个人信息展示 -->
        <div class="profile-info">
            <img src="profile-avatar.jpg" alt="用户头像" class="user-avatar"> <!-- 用户头像 -->
            <p><strong>用户名：</strong> 用户名</p>
            <p><strong>积分：</strong> 1000</p>
            <p><strong>排名：</strong> 第10位</p>
            <!-- 更多个人信息 -->
        </div>

        <!-- 用户操作 -->
        <div class="user-actions">
            <button onclick="location.href='settings.html'">设置</button>
            <button onclick="location.href='orders.html'">我的订单</button>
            <button onclick="location.href='messages.html'">消息</button>
        </div>

        <!-- 历史记录 -->
        <div class="history">
            <h3>历史记录</h3>
            <ul>
                <li>2024-05-20 - 参加了XX赛事</li>
                <!-- 更多历史记录 -->
            </ul>
        </div>

        <!-- 个性化推荐 -->
        <div class="recommendations">
            <h3>个性化推荐</h3>
            <ul>
                <li>推荐赛事：XX大师赛</li>
                <!-- 更多推荐 -->
            </ul>
        </div>

        <!-- 社交功能 -->
        <div class="social">
            <h3>社交</h3>
            <!-- 社交功能实现 -->
        </div>
    </div>
</body>
</html>